.tree-root{
  display: -webkit-flex;
  display: flex;
  align-items: center;
  margin-bottom: 10px !important;
}
.tree-node{
  display: flex!important;
  justify-content: center;
  align-items: center;
  position: relative;
  padding:6px 10px;
  background:#fff;
  color:#333;
  min-width:80px;
  font-size: 12px;
  border: 1px solid #52c41a;
  .icon-operating{
    margin: 0 4px;
    display: flex;
    cursor: pointer;
    font-size: 16px;
    width: 16px;
    height:16px;
  }
}
.tree-node::before {
  position: absolute;
  top: 50%;
  left: -30px;
  display: block;
  width: 30px;
  height: 30px;
  border: none;
  border-top: 1px solid #52c41a;
  content: '';
}
.tree-node:first-child::before {
  position: absolute;
  top: 50%;
  left: -30px;
  display: none;
  width: 30px;
  height: 30px;
  border: none;
  border-top: 1px solid #52c41a;
  content: '';
}
.tree-node:after{
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  display: block;
  width: 30px;
  height: 1px;
  border:none;
  background-color:#52c41a;
  content: '';
}
.leaf-node::after {
  display: none;
}
.tree-childNodes{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 60px;
}
.tree-childNodes> &{
    display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tree-childNodes-row{
  position: relative;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.tree-childNodes-row:last-child{
  margin-bottom: 0;
}
.tree-childNodes-row:before{
  position: absolute;
  left: -30px;
  top: 50%;
  display: block;
  width: 30px;
  height: 1px;
  background-color:#52c41a;
  content: '';
}
.multiply-node::after{
  position: absolute;
  box-sizing: border-box;
  left: -30px;
  top: 0;
  display: block;
  width: 30px;
  height: calc(100% + 10px);
  border: none;
  border-left: 1px solid #52c41a;
  content: '';
}
.multiply-node:first-child:after{
  position: absolute;
  box-sizing: border-box;
  left: -30px;
  top: 50%;
  display: block;
  width: 30px;
  height: calc(100%  - 50% + 10px);
  border: none;
  border-left: 1px solid #52c41a;
  content: '';
}
.multiply-node:last-child:after{
  position: absolute;
  box-sizing: border-box;
  left: -30px;
  display: block;
  width: 30px;
  height: calc(100%  - 50%);
  border: none;
  border-left: 1px solid #52c41a;
  content: '';
}